<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部 -->
      <header>
        <!--  -->
        <header>
          <el-button
            class="button"
            type="success"
            icon="el-icon-edit"
            size="small"
            style="margin-bottom:15px;"
          >新增试题</el-button>
        </header>
        <!-- form表单 -->

        <el-form ref="form" :model="form" label-width="80px">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="subject" label="学科">
                <el-select
                  @change="subjectChange"
                  v-model="form.subject"
                  size="small"
                  placeholder="请选择"
                  style="width:100%;"
                >
                  <el-option
                    v-for="item in subject"
                    :key="+(item.value)"
                    :label="item.label"
                    :value="+(item.value)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="directorys" label="二级目录">
                <el-select
                  style="width:100%;"
                  v-model="form.directorys"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in directorys"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.directoryName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select style="width:100%;" v-model="form.tags" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in tags"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="key">
                <el-input v-model="form.key" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="difficulty" label="试题类型">
                <el-select
                  style="width:100%;"
                  v-model="form.difficulty"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="questionType" label="难度">
                <el-select
                  style="width:100%;"
                  v-model="form.questionType"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="direction" label="方向">
                <el-select
                  style="width:100%;"
                  v-model="form.direction"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="user" label="录入人">
                <el-select style="width:100%;" v-model="form.user" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in user"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="titleNotes" label="题目备注">
                <el-input v-model="form.titleNotes" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="enterpriseName" label="企业名称">
                <el-input v-model="form.enterpriseName" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cityChange" label="城市">
                <el-col :span="12">
                  <el-form-item prop="cityChange">
                    <el-select
                      style="margin-right:2%"
                      @change="cityChange"
                      v-model="form.city"
                      size="small"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in city"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="area">
                    <el-select v-model="form.area" size="small" placeholder="请选择">
                      <el-option
                        v-for="(item, index) in area"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item style="text-align:right">
                <el-button size="mini" @click="clear()">清除</el-button>
                <el-button size="mini" @click="page=1;list()" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </header>
      <!-- 具体内容----（table） -->
      <section>
        <!-- tabs -->
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="待审核" name="1"></el-tab-pane>
          <el-tab-pane label="已审核" name="2"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
        </el-tabs>
        <div>
          <el-alert close="title" type="info" :closable="false" :title="`数据一共${total}条`" show-icon></el-alert>
        </div>
        <!-- table -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120"></el-table-column>
          <el-table-column prop="subject" label="学科" width="110"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="110"></el-table-column>
          <el-table-column prop="questionType" label="题型" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty | questionTypeChange }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | dateChange }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty | difficultyChange }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="110"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.chkState === 0 ? '待审核' : (scope.row.chkState === 1 ? '已审核' : '已拒绝') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="140"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="110"></el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="140">
            <template slot-scope="scope">
              <span>{{ scope.row.chkState === 0 ? '待发布' : (scope.row.publishState === 1 ? '已发布' : '已下架') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$refs.questionsPreview.view(scope.row.id)"
              >预览</el-button>
              <el-button
                @click="dialogVisible=true;formChkState.id = scope.row.id"
                type="text"
                size="small"
                style="margin-right:5px"
                :disabled="scope.row.chkState !== 0  "
              >审核</el-button>

              <el-button
                type="text"
                size="small"
                :disabled=" scope.row.publishState === 1 "
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                @click="choicePublish(scope.row)"
              >{{ scope.row.publishState === 0 ? '上架' : '下架' }}</el-button>
              <el-button
                type="text"
                size="small"
                :disabled=" scope.row.publishState === 1 "
                @click="delFn(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <footer>
          <el-pagination
            v-if="page !== 1"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size.sync="pageSize"
            layout="prev, pager,next,sizes,jumper"
            :total="total"
          ></el-pagination>
        </footer>
      </section>
    </el-card>

    <!-- 审核的弹出表框 -->
    <el-dialog title="题目审核" :visible.sync="dialogVisible" @closed="closedChkState" width="26%">
      <!-- form表单 -->
      <el-form ref="formChkState" :rules="rules" :model="formChkState">
        <el-form-item>
          <el-radio-group v-model="formChkState.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input placeholder="请输入审核意见" type="textarea" v-model="formChkState.chkRemarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chkStated">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览框 -->
    <questionsPreview ref="questionsPreview"></questionsPreview>
  </div>
</template>

<script>
// 审核框的数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice as list, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions'
import { simple as subjectsList } from '@/api/hmmm/subjects'
import { list as directorysList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'

const newChkState = () => {
  return {
    id: null, // id
    chkState: 1, // 1 通过 2 不通过
    chkRemarks: '' // 原因
  }
}
export default {
  name: 'questions',
  filters: {
    dateChange: function (value) {
      // console.log(value)
      // console.log()
      let year = new Date(value).getFullYear()
      let month = new Date(value).getMonth() + 1
      let day = new Date(value).getDate()
      let hour = new Date(value).getHours()
      let minutes = new Date(value).getMinutes()
      let seconds = new Date(value).getSeconds()
      year = year < 10 ? '0' + year : year
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      hour = hour < 10 ? '0' + hour : hour
      minutes = minutes < 10 ? '0' + minutes : minutes
      seconds = seconds < 10 ? '0' + seconds : seconds

      return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
    },
    difficultyChange: function (value) {
      // console.log(value)
      const obj = difficulty.find(item => item.value === +value)
      // console.log(obj)
      return obj.label
    },
    questionTypeChange (value) {
      // console.log(value)
      const obj = questionType.find(item => item.value === +value)
      // console.log(obj)
      return obj.label
    }
  },
  components: {
    questionsPreview
  },
  data () {
    return {
      tableData: [], // table数据
      page: 1, // 当前页码
      pageSize: 5, // 页面尺寸
      total: 0, // 数据组总数
      form: {
        subject: null, // 学科
        directorys: null, // 二级目录
        key: '', // 关键字
        tags: '', // 标签
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: '', // 方向
        user: '', // 录入人
        titleNotes: '', // 题目备注
        enterpriseName: '', // 企业名称
        city: '', // 城市
        area: '' // 地区
      },
      subject: [], // 学科列表
      directorys: [], // 二级目录
      tags: [], // 标签选择框
      questionType: difficulty, // 难度
      difficulty: questionType, // 题型
      direction: direction, // 方向
      user: [], // 用户里列表
      city: provinces(), // 城市
      area: [], // 地区
      activeName: 0, // tabs对应的值
      dialogVisible: false, // 对话框
      formChkState: newChkState(), // 审核狂
      rules: {
        chkRemarks: [
          { required: true, message: '请选择活动资源', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    // 获取数据
    this.list()
    // 获取学科列表
    this.subjectsList()
    // 获取录入人
    this.userList()
  },
  methods: {
    // 获取页面数据
    async list (obj) {
      const res = await list({
        page: this.page,
        pagesize: this.pageSize,
        subjectID: this.form.subject,
        ...obj
      })
      // console.log(res)
      if (res.data.items.length === 0 && this.page > 1) {
        this.page--
        this.list()
        return
      }
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 页面尺寸改变的时候触发
    handleSizeChange (val) {
      this.list()
    },
    // 页码改变的时候触发
    handleCurrentChange (val) {
      this.list()
    },
    // 学科列表
    async subjectsList () {
      const res = await subjectsList()
      // console.log(res)
      this.subject = res.data
    },
    // subject改变的时候（学科）
    subjectChange (subjectID) {
      // console.log(id)
      this.directorysList(subjectID)
      this.tagsList(subjectID)
    },
    // 二级目录
    async directorysList (subjectID) {
      const res = await directorysList({ subjectID })
      // console.log(res)
      this.directorys = res.data.items
    },
    // 标签选择框
    async tagsList (subjectID) {
      const res = await tagsList({ subjectID })
      // console.log(res)
      this.tags = res.data.items
    },
    // 获取录入人
    async userList () {
      const res = await userList()
      // console.log(res)
      this.user = res.data.list
    },
    // 选择城市后
    cityChange (city) {
      this.area = citys(city)
    },
    // 清除表单数据
    clear () {
      this.$refs.form.resetFields()
      this.list()
    },
    // 删除题
    async delFn (id, flag) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove({ id })
      console.log(id)
      this.$message.success('删除成功！')
      this.list()
    },
    // 上架下架
    async choicePublish (row) {
      await choicePublish({
        id: row.id,
        publishState: row.publishState === 1 ? 0 : 1
      })
      if (row.publishState === 0) {
        this.$message.success('下架成功成功！')
      } else {
        this.$message.success('上架成功成功！')
      }
      // 刷新页面
      this.list()
    },
    // 审核框的关闭
    closedChkState () {
      this.formChkState = newChkState()
      this.dialogVisible = false
    },
    // 审核结果
    chkStated () {
      this.$refs.formChkState.validate(async (valid) => {
        if (valid) {
          await choiceCheck(this.formChkState)
          this.dialogVisible = false
          this.list()
          this.$message.success('操作成功')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // tabs点击后更改
    handleClick () {
      const state = this.activeName
      const chkStated = state === '0' ? null : (state === '1' ? 0 : (state === '2' ? 1 : 2))
      this.list({ chkState: chkStated })
    }

  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px;
  height: 100%;
  background: #fff;
  .box-card {
    header {
      header {
        display: flex;
        justify-content: right;
        .button {
          margin-bottom: 15px;
        }
      }
    }
    section {
      footer {
        margin-top: 20px;
        display: flex;
        justify-content: right;
      }
    }
  }
}
.select {
  width: 120px !important;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}

::v-deep .btn-prev {
  margin: 0 5px;
  background: #f4f4f5 !important;
}
::v-deep .number {
  margin: 0 5px;
  background: #f4f4f5 !important;
}
::v-deep .btn-next {
  margin: 0 5px;
  background: #f4f4f5 !important;
}
::v-deep .el-alert {
  margin-bottom: 15px;
  padding: 8px 16px;
}

::v-deep .el-pagination__jump {
  margin: 0;
}
::v-deep .el-form-item--medium {
  margin-bottom: 18px;
}
::v-deep .el-col {
  padding: 10px 0;
}
</style>
